import React from 'react';
import './footer.css';
import {
  BrowserRouter as Router,
  Route,
  NavLink
} from 'react-router-dom';
import Home from '../home'
import User from '../user'
import Category from '../category'
import Cart from '../cart'

class Foot extends React.Component {

    state = {
        'active':'active'
    }

    handleClick = (prop) => {
        if (prop === false) {
            this.setState({'active':''})
        }
    }

    render() {
        return (
            <Router>
                <div>
                    <ul className="footer">
                        <NavLink to="/home" onClick={this.handleClick.bind(this,true)} className={this.state.active} activeClassName="active"><li><i className="iconfont icon-shouye"></i>首页</li></NavLink>
                        <NavLink to="/category" onClick={this.handleClick.bind(this,false)} activeClassName="active"><li><i className="iconfont icon-category"></i>分类</li></NavLink>
                        <NavLink to="/cart" onClick={this.handleClick.bind(this,false)} activeClassName="active"><li><i className="iconfont icon-gouwuche1"></i>购物车</li></NavLink>
                        <NavLink to="/user"  onClick={this.handleClick.bind(this,false)} activeClassName="active"><li><i className="iconfont icon-denglu"></i>我的</li></NavLink>
                    </ul>

                    <Route exact path="/" component={Home}/>
                    <Route path="/home" component={Home}/>
                    <Route path="/user" component={User}/>
                    <Route path="/cart" component={Cart}/>
                    <Route path="/category" component={Category}/>
                </div>
            </Router>
        )
    }
}

export default Foot
